/* eslint-disable react-refresh/only-export-components */
import { message, Modal } from 'antd';
import { ConfigOptions, JointContent as AntdJointContent, MessageType } from 'antd/es/message/interface';
import React, { useMemo } from 'react';
import styled from 'styled-components';
import Icon from './Icon';

type PositionType = 'top' | 'center';
type MethodType = 'info' | 'success' | 'error';
type JointContent = AntdJointContent | { position?: PositionType, element: AntdJointContent };
const HEIGHT = '18.875rem';

const Container = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  height: ${HEIGHT};
`
const ContentBox = styled.div<{ $bg: string, $color?: string }>`
  padding: .5rem 1rem;
  box-sizing: border-box;
  background-color: ${({ $bg }) => $bg};
  border-radius: .625rem;
  color: ${({ $color }) => $color};
  font-size: 1rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
`

const Content: React.FC<{ method: MethodType, data: AntdJointContent }> = ({ method, data }) => {
  const node = useMemo(() => {
    if (typeof data === 'object' && data !== null && ('content' in data)) {
      return data.content;
    }
    return data
  }, [data])

  const styles = useMemo(() => {
    return method === 'success' ? {
      '$bg': '#01BFBF',
      '$color': '#fff'
    } : {
      '$bg': '#fff'
    }
  }, [method])
  return <Container>
    <ContentBox {...styles}>
      {method === 'success' && <Icon
        style={{ marginRight: '0.5rem' }}
        name='task_success'
        width='1rem'
      />}
      {node}
    </ContentBox>
  </Container>;
}

const DEFAULT_DURATION = 2;
export default class Message {
  private static position: 'top' | 'center' = 'top';
  static config(config: ConfigOptions & { position?: PositionType }) {
    this.position = config.position || 'top'
    message.config(config)
  }

  static info(content: JointContent, duration?: number | VoidFunction, onClose?: VoidFunction): MessageType | undefined {
    return this.showMessage('info', content, duration || DEFAULT_DURATION, onClose)
  }

  static success(content: JointContent, duration?: number | VoidFunction, onClose?: VoidFunction): MessageType | undefined {
    return this.showMessage('success', content, duration || DEFAULT_DURATION, onClose)
  }

  static error(content: JointContent, duration?: number | VoidFunction, onClose?: VoidFunction): MessageType | undefined {
    return this.showMessage('error', content, duration || DEFAULT_DURATION, onClose)
  }

  private static showMessage(method: MethodType, content: JointContent, duration?: number | VoidFunction, onClose?: VoidFunction): MessageType | undefined {
    if (!content) {
      return
    }

    let position = this.position;
    let realContent: AntdJointContent;
    if (typeof content === 'object' && content !== null && ('element' in content)) {
      realContent = content.element
      position = content.position || this.position
    } else {
      realContent = content
    }

    if (position === 'center') {
      return this.centerMessage(method, realContent, duration || DEFAULT_DURATION, onClose)
    }
    return message[method](realContent, duration || DEFAULT_DURATION, onClose)
  }

  private static centerMessage(method: MethodType, content: AntdJointContent, duration?: number | VoidFunction, onClose?: VoidFunction): MessageType | undefined {
    const modal = Modal[method]({
      width: '19.25rem',
      mask: false,
      style: {
        height: HEIGHT,
      },
      icon: <></>,
      footer: null,
      content: <Content
        method={method}
        data={content}
      />,
      getContainer: () => document.getElementById('ele_modal') || document.body,
      centered: true,
    })

    if (typeof duration === 'number') {
      setTimeout(() => {
        modal.destroy()
        onClose?.()
      }, duration * 1000);
    } else {
      if (duration) {
        modal.destroy()
      }
    }
    return undefined
  }
}